<template>
  <div class="home">
    <!--      轮播图-->
    <div class="carousel-map">
      <el-carousel
        :interval="4000"
        @change="changeImg"
        style="width: 100%; margin-top: 1px"
        trigger="click"
        height="500px"
      >
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <el-image
            :class="className"
            style="width: 100%; height: 100%"
            :src="item"
            fit="cover"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="carousel-introductions">
      <div>
        <span>
          百花飘香的马盂山，清澈见底的辽河源，白马青牛的美好情缘，从此契丹在这里生息繁衍。
        </span>
      </div>
      <div>
        <span>
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          &nbsp; &nbsp; &nbsp;
          柳溪镇坐落于河北、内蒙古、辽宁三省交界处，是七大江河之一的辽河的发祥地，拥有辽河源头、九龙蟠杨树、石羊石虎等众多景点，&nbsp;
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
          &nbsp; &nbsp; &nbsp;马盂山脚下，
          &nbsp;老哈河岸边，碧水蓝天，天然氧吧， 是休闲旅游的绝佳选择。 &nbsp;
          &nbsp; &nbsp; &nbsp;
        </span>
      </div>

      <p>欢迎各地游客前来观赏游玩</p>

      <!-- <span @click="toLandscapeView"
        ><el-button id="btn circle" type="success"
          >前往欣赏异域美景</el-button
        ></span
      > -->
    </div>
    <router-link to="/landscape">
      <el-button type="success">前往欣赏异域美景</el-button></router-link
    >
  </div>
</template>
<style scoped>
/* // 轮播图样式 */
#btn {
  margin: 8px auto;
  flex-shrink: 0;
  width: 160px;
  height: 64px;
}
#circle {
  border-radius: 64px;
  background: #7de3c8;
}
.carousel-introductions {
  background: rgba(216, 211, 211, 0.8);
}
.carousel-introductions p {
  float: auto;
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* // 轮播图样式 */
</style>
<script>
import L1 from '@/assets/img/1.jpg'
import L2 from '@/assets/img/2.jpg'
import L3 from '@/assets/img/3.jpg'
export default {
  name: 'HomeView',
  data() {
    return {
      bannerList: [L1, L2, L3], //轮播图地址 这块写你们的轮播图数组即可
      className: '', //轮播图名字
    }
  },
  mounted() {
    this.className = 'lun-img'
    setTimeout(() => {
      this.className = 'lun-img-two'
    }, 300)
  },
  methods: {
    //轮播图切换
    changeImg(e) {
      this.className = 'lun-img'
      setTimeout(() => {
        this.className = 'lun-img-two'
      }, 300)
    },
  },

  //路由跳转
  toLandscapeView() {
    console.info('点击跳转toLandscapeView')
    this.$tourter.push('/landscape')
  },
}
</script>
